<template>
<div class="box-chart-cp">
    <MyChart
        ref="MyChart">
    </MyChart>
</div>
</template>
<script>
/*
 横向箱型图组件
 */
import MyChart from '@/components/MyChart';
export default {
    components:{MyChart},
    props:{
        baseData:{  //需要展示的数据
            type:Array,
            default:()=>{
                return [];
            },
        },
        borderColor:{  //边框颜色
            type:String,
            default:'red',
        },
        minMax:{
            type:Array,
            default:()=>{
                return [0,100];
            },
        },
    },
    data() {
        return {};
    },
    watch:{
        baseData:{
            handler(){
                this.$nextTick(()=>{
                    this.drawChart();
                });
            },
            immediate:true,
        },
    },
    methods:{
        drawChart(){  //绘制表格
            let value = this.baseData;
            this.$refs.MyChart.setOption({
                dataset: [
                    {
                        source: [
                            value,
                        ],
                    },
                    {
                        fromDatasetIndex: 0,
                        transform: {
                            type: 'boxplot',
                            config: { itemNameFormatter: 'expr {value}' }
                        }
                    },
                ],
                tooltip: {
                    trigger: 'item',
                    axisPointer: {
                        type: 'shadow'
                    },
                    // formatter:params=>{
                    //     console.log(params);
                    //     return 1;
                    // },
                },
                grid: {
                    left: '0',
                    right: '0',
                    top: '0',
                    bottom:'0',
                },
                xAxis: {
                    type: 'value',
                    min:this.minMax[0],
                    max:this.minMax[1],
                    splitArea: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show:false,
                    },
                    axisLabel:{  //x轴的标签设置
                        show:false,
                    },
                },
                yAxis: {
                    type: 'category',
                    splitArea: {
                        show: false,
                    },
                    axisLine: {
                        show:false,
                    },
                    splitLine: {//分割线配置
                        show:false,
                    },
                },
                series: [
                    {
                        name: '',
                        type: 'boxplot',
                        datasetIndex:1,
                        color:this.borderColor,
                        itemStyle: {
                            color: this.borderColor,
                            opacity:0.8,
                        },
                    },
                ]
            });
        },
    },
};
</script>
<style scoped lang="scss">
.box-chart-cp{
    width: 100%;
    height:100%;
}
</style>
